<!--
 * @Author: wusd
 * @Date: 2022-05-18 14:58:44
 * @LastEditors: wusd
 * @LastEditTime: 2022-06-24 15:15:24
 * @Description: 
 * 
-->
<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'
import { REGS } from '@/untils/validate.js'
import { getMenue } from '@/untils/commonAxios'
@Component({
  name: 'ceshi'
})
export default class test extends Vue {
  form = {
    account: '',
    password: '',
    verificationCode: ''
  }
  rules = {
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    account: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: REGS.phone, message: '请输入正确手机号' }
    ]
  }

  private login() {
    ;(this.$refs as any).ruleForm.validate(async (valid: any) => {
      valid = true
      if (valid) {
        // let res = await this.$http.post('/login', this.form)
        let res = {
          code: 2000,
          data: {
            token: '88888',
            user: {
              name: 'wsd'
            }
          }
        }
        if (res.code === 2000) {
          this.$store.commit('setToken', res.data.token)
          this.$store.commit('setUserInfo', res.data.user)
          await getMenue()
          this.$router.replace({
            path: 'personal'
          })
        }
      } else {
        return false
      }
    })
  }
  protected render() {
    return (
      <div class="Login bj">
        <div class="content">
          <div class="top">
            <img src={require('@/assets/image/logo.png')} class="logo" style="margin-right: 30px" />
            <span class="systemTitle">系统名</span>
          </div>
          <el-form
            props={{
              model: this.form
            }}
            class="form box_center"
            rules={this.rules}
            ref="ruleForm">
            <h2 class="title">登录</h2>
            <el-form-item prop="account">
              <el-input placeholder="请输入手机号码" v-model={this.form.account} class="input">
                <img src={require('@/assets/image/people.png')} alt="" slot="prepend" />
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" type="password" v-model={this.form.password} class="input">
                <img src={require('@/assets/image/password.png')} alt="" slot="prepend" />
              </el-input>
            </el-form-item>

            <el-button
              type="primary"
              class="box_center"
              round
              style="width: 80%; margin-top: 40px"
              onclick={this.login}>
              立即登录
            </el-button>
          </el-form>
        </div>
        <footer>主办单位</footer>
      </div>
    )
  }
}
</script>

<style lang="scss">
.bj {
  /* 加载背景图 */
  background-image: url('~@/assets/image/login_bj.png');
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
}
.Login {
  position: relative;
  height: 100%;
  .logo {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    overflow: hidden;
  }
  .el-input-group__prepend,
  .el-input__inner,
  .el-input-group__append {
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #dcdfe6;
  }
  .el-form-item {
    width: 80%;
    margin: 0 auto;
  }
  .systemTitle {
    font-weight: 600;
    font-size: 30px;
    margin-left: 20px;
    color: #fff;
  }
  .content {
    position: absolute;
    width: 1000px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .top {
      display: flex;
      justify-content: center;
      padding-top: 126px;
      width: 100%;
      align-items: center;
      @media screen and (max-width: 1080px) {
        padding-top: 30px;
      }
    }
    .form {
      width: 520px;
      @media screen and (max-width: 1080px) {
        width: 450px;
      }
      padding-bottom: 40px;
      margin-top: 40px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
      margin-top: 40px;
      .title {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
        line-height: 90px;
        text-align: center;
      }
      .input {
        margin-top: 40px;
        @media screen and (max-width: 1080px) {
          margin-top: 20px;
        }
      }
    }
  }
  footer {
    position: absolute;
    bottom: 38px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    background-color: transparent;
    @media screen and (max-width: 1080px) {
      bottom: 15px;
    }
  }
}
</style>
